<template>
  <div class="search-input">
    <div class="input-border">
      <input placeholder="请点击搜索相关商品" />
      <div class="button">搜索</div>
    </div>
    <HomeSwiper />
    <div class="home-mr">
      <div class="home-overview">
        <div v-for="item in overviewList" :key="item.image" class="list-item">
          <img :src="getImagePath(item.image)" />
          <div class="title">{{ item.title }}</div>
        </div>
      </div>
      <div class="home-activity">
        <div class="list-item">活动报名</div>
        <div class="list-item">导游解说</div>
      </div>
      <div class="home-navs">
        <div v-for="item in navList" :key="item.image" class="list-item">
          <img :src="getImagePath(item.image)" />
          <div class="title">{{ item.title }}</div>
        </div>
      </div>
      <div class="home-shop">
        <div class="base-title">
          <div class="title">热门商品</div>
          <div class="more">查看更多</div>
        </div>
        <div v-for="item in 3" :key="item" class="list-item">
          <div class="head-title">
            <div class="title">五台山</div>
            <div class="price">
              <span>￥</span>
              <em>63/组</em>
            </div>
          </div>
          <div class="list-content">
            <img src="@/assets/images/home-img19.png" alt="" />
            <div class="text">
              <p>莲花灯7盏</p>
              <span>
                据说释迦牟尼佛刚出生的时候,一出生就落地行走7步，七盏走7步，七盏走7步，七盏
              </span>
            </div>
            <div class="tag">
              <p>招财开运</p>
            </div>
          </div>
          <div class="list-btns">
            <div class="button">查看供养说明</div>
            <div class="button">加入购物车</div>
          </div>
        </div>
      </div>
      <div class="base-title">
        <div class="title">公告</div>
        <div class="more">查看更多</div>
      </div>
      <div class="home-news">
        <div v-for="item in 3" :key="item" class="list-item">
          <div class="title">学习贯彻党的二十届三中全会精神</div>
          <div class="time">2024-12-30 12:00:00</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getImagePath } from '@/utils/importImg.js'
import HomeSwiper from './components/homeSwiper.vue'

const overviewList = [
  {
    image: 'home-img4.png',
    title: '公司资质'
  },
  {
    image: 'home-img5.png',
    title: '佛教日大全'
  },
  {
    image: 'home-img6.png',
    title: '峨眉山'
  },
  {
    image: 'home-img7.png',
    title: '五台山'
  },
  {
    image: 'home-img8.png',
    title: '普陀山'
  },
  {
    image: 'home-img9.png',
    title: '九华山'
  }
]

const navList = [
  {
    image: 'home-img12.png',
    title: '民间传说'
  },
  {
    image: 'home-img13.png',
    title: '心即是佛'
  },
  {
    image: 'home-img14.png',
    title: '经书经典'
  },
  {
    image: 'home-img15.png',
    title: '达人视频'
  }
]
</script>

<style lang="scss" scoped>
.search-input {
  .input-border {
    border: 2px solid #b54230;
    border-radius: 24px;
    background: #fff;
    margin: 20px 32px;
    position: relative;
    input {
      border: none;
      height: 64px;
      font-size: 24px;
      padding: 0 52px;
      background: url('@/assets/images/home-img2.svg') no-repeat 20px center /
        28px;
      &:focus-visible {
        outline: none;
      }
      &::placeholder {
        color: #aaa;
      }
    }
    .button {
      position: absolute;
      right: 2px;
      width: 104px;
      height: 60px;
      line-height: 60px;
      background: #b54230;
      border-radius: 24px;
      font-size: 28px;
      top: 0;
      bottom: 0;
      margin: auto;
      text-align: center;
      color: #fff;
    }
  }
}
.home-overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  margin: 24px 0 32px;
  background: linear-gradient(
    180deg,
    rgba(161, 23, 39, 0.1) 0%,
    rgba(161, 23, 39, 0.05) 100%
  );
  border-radius: 24px;
  padding: 10px 0 22px;
  .list-item {
    margin-top: 22px;
    font-size: 0;
  }
  img {
    width: 100px;
  }
  .title {
    line-height: 40px;
    font-weight: 400;
    font-size: 28px;
    color: #3c2022;
    margin-top: 16px;
  }
}
.home-mr {
  margin: 0 32px;
}
.home-activity {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 22px;
  .list-item {
    height: 128px;
    line-height: 128px;
    text-align: center;
    color: #a11727;
    font-weight: 400;
    font-size: 36px;
    background: url('@/assets/images/home-img11.png') no-repeat center / cover;
    &:first-child {
      background-image: url('@/assets/images/home-img10.png');
    }
  }
}
.home-navs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 16px;
  margin-top: 32px;
  .list-item {
    height: 220px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    font-size: 0;
    img {
      width: 160px;
      height: 160px;
    }
    .title {
      line-height: 60px;
      text-align: center;
      font-weight: 400;
      font-size: 26px;
      color: #3c2022;
      @include text-ellipsis;
    }
  }
}
.base-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title {
    padding-left: 48px;
    font-size: 36px;
    color: #a11727;
    line-height: 52px;
    font-weight: 500;
    background: url(@/assets/images/home-img16.svg) no-repeat left center / 40px;
  }
  .more {
    font-weight: 400;
    font-size: 28px;
    line-height: 32px;
    color: rgba(60, 32, 34, 0.5);
    background: url(@/assets/images/home-img17.svg) no-repeat right center /
      28px;
    padding-right: 28px;
  }
}
.home-shop {
  margin: 60px 0 48px;
  .list-item {
    background: #fff;
    border-radius: 24px;
    border: 2px solid rgba(161, 23, 39, 0.5);
    margin-top: 24px;
    padding: 0 24px;
  }
  .head-title {
    display: flex;
    height: 90px;
    align-items: center;
    justify-content: space-between;
    .title {
      background: url(@/assets/images/home-img18.svg) no-repeat left center /
        40px;
      font-weight: 400;
      font-size: 32px;
      line-height: 45px;
      padding-left: 48px;
      color: #3c2022;
    }
    .price {
      color: #b54230;
      font-size: 0;
      font-weight: 500;
      span {
        font-size: 32px;
      }
      em {
        font-style: normal;
        font-size: 36px;
      }
    }
  }
  .list-content {
    display: flex;
    padding: 24px 0;
    border-bottom: 2px dashed rgba(60, 32, 34, 0.25);
    border-top: 2px dashed rgba(60, 32, 34, 0.25);

    img {
      width: 160px;
      height: 160px;
      border-radius: 16px;
      margin-right: 20px;
    }
    .text {
      color: #3c2022;
      flex: 1;
      p {
        font-weight: 400;
        font-size: 32px;
        line-height: 45px;
        margin: 8px 0 20px;
        @include text-ellipsis;
      }
      span {
        font-weight: 300;
        font-size: 28px;
        line-height: 39px;
        text-align: justify;
        @include text-ellipsis(2);
      }
    }

    .tag {
      width: 50px;
      height: 160px;
      text-align: center;
      background: url(@/assets/images/home-img20.svg) no-repeat center / 100%
        100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 30px;
      box-sizing: border-box;
      margin-left: 20px;
      p {
        width: 24px;
        line-height: 28px;
        font-size: 24px;
        color: #b54230;
        font-weight: 400;
      }
    }
  }
  .list-btns {
    display: flex;
    justify-content: flex-end;
    padding: 24px 0;
    .button {
      font-weight: 400;
      font-size: 28px;
      color: #a11727;
      line-height: 58px;
      padding: 0 28px;
      margin-left: 24px;
      background: url(@/assets/images/home-img21.svg) no-repeat center / 100%
        100%;
    }
  }
}
.home-news {
  background: #fff;
  border-radius: 24px;
  margin-top: 22px;
  border: 2px solid rgba(181, 66, 48, 0.5);
  padding: 8px 24px;
  margin-bottom: 40px;
  .list-item {
    border-bottom: 2px dashed rgba(60, 32, 34, 0.25);
    padding: 24px 0;
    &:last-child {
      border-bottom: none;
    }
    .title {
      font-weight: 400;
      font-size: 28px;
      color: #444;
      line-height: 40px;
      @include text-ellipsis;
    }
    .time {
      font-weight: 400;
      font-size: 24px;
      color: #999;
      margin-top: 8px;
      line-height: 34px;
    }
  }
}
</style>
